<template>
  <div class="content row-center">
    <div class="content-box" v-show="store.navId == 1 && store.sessionSelectId != 0">
      <!--头部-->
      <chat-head></chat-head>
      <!--聊天内容-->
      <div class="content-win">
        <n-scrollbar style="max-height: 100%" ref="contentScrollbar">
          <template v-for="(item, index) in conversitionList" :key="index">
            <div v-if="item.SendId == store.sender.Id">
              <div class="mine-block">
                <div v-if="item.State == 0">
                  <n-spin :class="item.Type == 1 ? 'mine-image-load' : 'mine-load'" size="small" />
                </div>
                <div v-else-if="item.State == -1">
                  <span class="item.Type == 1 ? 'sendImageError':'sendError'">!</span>
                </div>
                <div v-if="item.Type == 0" class="block mine-text" v-html="item.Content"></div>
                <img v-else-if="item.Type == 1" class="send-image" v-bind:src="item.Content"
                  @click="loadOverImg(item.Content)" preview="1" />
                <video v-else-if="item.Type == 2" class="send-video" width="320" height="240" controls>
                  <source :src="item.Content" type="video/mp4" />
                  您的浏览器不支持 HTML5 video 标签。
                </video>
                <audio class="send-video" v-else-if="item.Type == 3" controls>
                  <source :src="item.Content" type="audio/mpeg" />
                  您的浏览器不支持该音频格式。
                </audio>

                <div class="mine-avatar">
                  <img v-bind:src="item.Avatar" />
                </div>
              </div>
              <div style="clear: both"></div>
            </div>
            <div v-else-if="getRevicerStatus(item.SendId)">
              <div v-if="item.State == 1" class="reciver-block">
                <div class="reciver-avatar">
                  <img v-bind:src="item.Avatar" />
                </div>
                <div v-if="item.Type == 0" class="block reciver-text" v-html="item.Content"></div>
                <img v-else-if="item.Type == 1" class="send-image" v-bind:src="item.Content"
                  @click="loadOverImg(item.Content)" preview="1" />
                <video class="send-video" v-else-if="item.Type == 2" width="320" height="240" controls>
                  <source :src="item.Content" type="video/mp4" />
                  您的浏览器不支持 HTML5 video 标签。
                </video>
                <audio class="send-video" v-else-if="item.Type == 3" controls>
                  <source :src="item.Content" type="audio/mpeg" />
                  您的浏览器不支持该音频格式。
                </audio>
              </div>
              <div style="clear: both"></div>
            </div>
            <div v-else-if="item.Identity == 3">
              <div class="other-block">
                <span>{{ item.Content }}</span>
              </div>
            </div>
          </template>
        </n-scrollbar>
      </div>
      <!--聊天框底部-->
      <ChatFoot></ChatFoot>
    </div>
    <div v-show="store.navId == 2 && store.allSessionSelectId != 0" class="content-box row-center">
      <div class="info-box">
        <n-avatar round :size="80" :src="store.readyReciver.Avatar" />
        <div class="nick-name">{{ store.readyReciver.NickName }}</div>
        <div class="personality-sign">
          {{ store.readyReciver.PersonalitySign }}
        </div>
        <div class="info-more">
          <div class="more-item">
            <span>备&nbsp;&nbsp;&nbsp;&nbsp;注：</span>
            {{ store.readyReciver.Name }}
          </div>
          <div class="more-item">
            <span>手机号：</span>
            {{ store.readyReciver.Mobile }}
          </div>
          <div class="more-item">
            <span>地&nbsp;&nbsp;&nbsp;&nbsp;区：</span>
            {{ store.readyReciver.Region }}
          </div>
        </div>
        <n-button class="send-info" type="primary" size="large" @click="readySend"
          :color="store.theme == 'default' ? '#18A058' : '#409EFF'">发消息</n-button>
      </div>
    </div>
    <div
    v-show="(store.sessionSelectId == 0 && store.navId == 1) || (store.allSessionSelectId == 0 && store.navId == 2)"
    class="content-slow"
  >
    <img src="../assets/img/empty.png" class="logo" alt="Logo" />
    <div class="title">期待和你开启新故事~</div>
  </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, computed, getCurrentInstance } from "vue";
import ChatHead from "./ChatHead.vue";
import ChatFoot from "./ChatFoot.vue";
import { useMainStore } from "../store/index";
import Conversition from "../class/Conversition";
import { insertHistorySession } from '../api/historySession'
const { proxy }: any = getCurrentInstance()
const store:any = useMainStore();
onMounted(() => {
  proxy.$nextTick(() => {
    store.contentScrollbar = proxy.$refs.contentScrollbar;
  })
})
const conversitionList = computed(() => {
  let reciverId = store.reciver?.FormId || store.reciver.Id;//当前接受者的id
  return store.conversitionList.filter(
    (x: Conversition) =>
      (x.SendId == store.sender.Id && x.ReciverId == reciverId) ||//我发给别人的消息
      (x.ReciverId == store.sender.Id && x.SendId == reciverId)//别人发给我的消息
  );
});
function getRevicerStatus(SendId: any) {//处理发过来的信息
  let reciverId = store.reciver?.FormId || store.reciver?.Id;
  return SendId == reciverId;
}
function readySend() {
  store.sessionSelectId = store.readyReciver.Id;
  store.reciver = store.readyReciver;
  store.navId = 1;
  store.initEditor();

  let len =
    store.sessionList.filter((x: any) => x.FormId == store.readyReciver.Id)
      ?.length ?? 0;
  if (len === 0) {
    let item = {
      formId: store.readyReciver?.Id,
      name: store.readyReciver.Name,
      nickName: store.readyReciver.NickName || undefined,
      personalitySign: store.readyReciver.PersonalitySign || undefined,
      mobile: store.readyReciver.Mobile || undefined,
      region: store.readyReciver.Region || undefined,
      avatar: store.readyReciver.Avatar,
      email: store.readyReciver?.Email,
      byId: store.sender?.Id,
    };
    store.sessionList.push(item);
    insertHistorySessionFun();
  }
  store.toTop();
  store.changeReaded(store.readyReciver.Id);
}
function insertHistorySessionFun() {
  let data = {
    formId: store.readyReciver?.Id,
    name: store.readyReciver.Name,
    nickName: store.readyReciver.NickName || undefined,
    personalitySign: store.readyReciver.PersonalitySign || undefined,
    mobile: store.readyReciver.Mobile || undefined,
    region: store.readyReciver.Region || undefined,
    avatar: store.readyReciver.Avatar,
    email: store.readyReciver?.Email,
    byId: store.sender?.Id,
  };
  insertHistorySession(data);
}
</script>
<style scoped lang="less">
/deep/.emo-image {
  height: 30px;
  width: 30px;
  vertical-align: middle;
  display: inline-block;
}

.content {
  width: 74%;
  height: 100%;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;

  .content-box {
    height: 95%;
    width: 95%;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .info-box {
      width: 60%;
      height: 90%;
      color: #333;
      margin: 0 auto;
      text-align: center;

      .nick-name {
        color: #007bff;
        font-size: 24px;
        margin-top: 15px;
      }

      .personality-sign {
        color: #666;
        font-size: 16px;
        margin-top: 15px;
        text-align: left;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 8;
        line-clamp: 8;
        -webkit-box-orient: vertical;
        text-align: center;
      }

      .info-more {
        margin-top: 20px;

        .more-item {
          padding: 5px 0;
          text-align: center;

          span {
            display: inline-block;
          }
        }
      }

      .send-info {
        margin-top: 50px;
        width: 200px;
      }
    }

    .content-win {
      width: 100%;
      height: 60%;
      background: #f5f5f5;
      border-top: 1px solid #eaeaea;
      border-bottom: 1px solid #eaeaea;
      overflow-y: auto;

      .block {
        padding: 12px 18px;
        line-height: 24px;
        font-size: 16px;
        border-radius: 10px;
        position: relative;
        max-width: 350px;
        text-align: left;
        word-wrap: break-word;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .send-video {
        margin: 0 10px;
        border-radius: 10px;
      }

      .mine-block {
        float: right;
        margin: 20px 0;
        display: flex;
        position: relative;
        align-items: center;

        .mine-image-load,
        .mine-load {
          position: absolute;
          left: -50px;
          top: 50%;
          transform: translateY(-50%);
        }

        .send-image {
          border-radius: 11px;
          max-width: 200px;
          max-height: 200px;
          width: auto;
          height: auto;
          margin-right: 10px;
          cursor: pointer;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .mine-text {
          width: auto;
          height: auto;
          padding: 0px 15px;
          background: rgb(106, 236, 106);
          color: black;
          border-top-right-radius: 0;
          border-bottom-left-radius: 0;
          margin-right: 10px;
          float: right;
          word-wrap: break-word;
        }

        .mine-avatar {
          width: 45px;
          height: 45px;
          margin-right: 15px;
          border-radius: 50%;
          overflow: hidden;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

          img {
            height: 100%;
            width: 100%;
          }
        }
      }

      .reciver-block {
        float: left;
        margin: 20px 0;
        display: flex;
        position: relative;
        align-items: center;

        .send-image {
          border-radius: 11px;
          max-width: 200px;
          max-height: 200px;
          width: auto;
          height: auto;
          margin-left: 10px;
          cursor: pointer;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .reciver-avatar {
          width: 45px;
          height: 45px;
          margin-left: 15px;
          border-radius: 50%;
          overflow: hidden;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

          img {
            height: 100%;
            width: 100%;
          }
        }

        .reciver-text {
          background: #fff;
          color: #333;
          border-top-left-radius: 0;
          border-bottom-right-radius: 0;
          margin-left: 10px;
          float: left;
        }
      }

      .other-block {
        display: flex;
        position: relative;
        padding: 10px;
        background: #eaeaea;
        color: #333;
        border-radius: 15px;
        max-width: 400px;
        margin: 10px auto;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        span {
          display: inline-block;
          margin: 0 auto;
        }
      }
    }
  }

.content-slow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80%;
  width: 80%;
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  animation: slowAnimation 1s forwards;

  .logo {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }

  .desc {
    font-size: 16px;
    color: #666;
  }
  }

  @keyframes slowAnimation {
    0% {
      padding: 0;
    }

    100% {
      border-radius: 30px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }
  }
}
</style>